<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>2-条件指令</title>
		<script type="text/javascript" src="../../lib/vue/vue.min.js" ></script>
		<link  id="style_sheet" rel="stylesheet" href="../../css/css01.css" />
	</head>
	<body class="dbody">
		
		<h1>1- if 指令</h1>
		<div id="app">
	    <div v-if="type === 'A'">
	      A
	    </div>
	    <div v-else-if="type === 'B'">
	      B
	    </div>
	    <div v-else-if="type === 'C'">
	      C
	    </div>
	    <div v-else>
	      Not A/B/C
	    </div>
	    <select v-model='user.user_id'>
	    	<option value='1'>隐藏</option>
	    	<option value='2'>显示</option>
	    </select>
	    <div v-if="user.user_id == 2 ">
	    	<font color="red">id is 2</font>
	    </div>
	    <div v-else>
	    	<font color="red">id is not 2</font>
	    </div>
	    <font color="red" v-show="ok">OK!!! Hello!</font>    
	</div>
	<script>
		new Vue({
		  el: '#app',
		  data: {
		    type: 'C',
		    ok:true,
		    user:{user_id:'1'}
		  }
		})
	</script>
	
	<h1>2- 循环</h1>
	<p>循环使用 v-for 指令。</p>
	<p>v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。</p>
	<p>v-for 可以绑定数据到数组来渲染一个列表：</p>
	<div id="app2">
	  <ol style="margin-left: 30px;">
	    <li v-for="site in sites">
	      {{ site.name }}
	    </li>
	  </ol>
	
	
	<h2>模板中使用 v-for：</h2>
	<ul style="margin-left: 30px;">
		<template v-for="site in sites">
		<li>{{ site.name }}</li>
		<li>--------------</li>
		</template>
	</ul>
	
	<h2>使用 index 在 v-for 中：</h2>
	<ul style="margin-left: 30px;">
		<template v-for="(site, index) in sites">
		<!-- <p>{{index}}. {{ site.name }}</p> -->
		<p>{{index + ". " + site.name }}</p>
		</template>
	</ul>
	
	</div>
	<script>
		new Vue({
		  el: '#app2',
		  data: {
		    sites: [
		      { name: 'Runoob' },
		      { name: 'Google' },
		      { name: 'Taobao' }
		    ]
		  }
		})
	</script>
		
	<h2>迭代正对象</h2>
	<div id="app3">
	  <ul style="margin-left: 30px;">
	    <li v-for="value in object">
	    {{ value }}
	    </li>
	  </ul>
	 <hr />
		<ul style="margin-left: 30px;">
		    <li v-for="(value, key,index) in object">
		     {{ index }},{{ key }} : {{ value }}
		    </li>
		</ul>
	<hr />
	<span v-for="n in 10">{{n}},</span>
	</div>
	
	<script>
		new Vue({
		  el: '#app3',
		  data: {
		    object: {
		      name: '菜鸟教程',
		      url: 'http://www.runoob.com',
		      slogan: '学的不仅是技术，更是梦想！'
		    }
		  }
		})
	</script>
	
	<h1>3- 计算属性 computed</h1>
	<p>我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，<br/>
	只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。</p>
	<div id="app4">
		<input type="text" v-model="Msg" />
		<button v-on:click="getMsg">得到左边的值写到右边</button>
		<input type="text" readonly="true" v-model="Msg2"/>
	</div>
	<script>
		var vm = new Vue({
			el:"#app4",
			data:{
				Msg:"",
				Msg2:""
			},
			methods:{
				getMsg:function(){
					//通过Vue的set(对象,"属性名",属性值)方法
//					Vue.set(this,"Msg2",this.Msg);
					this.Msg2 = this.Msg;
					return this.Msg;
				}
			}
		})
	</script>
	<h2>3.1- getter 和 setter</h2>
	<div id="app5">
		<input type="text" v-model="name" /> ->
		<input type="text" readonly="true" v-model="site"/>
	</div>
	<script>
		var vm2 = new Vue({
			el:"#app5",
			data:{
				name:"Bart Simplson"
			},
			computed: {
				site: {
					get: function(){
						return "@" + this.name + "@";
					},
					set: function(val){
						console.log(val)
						this.name= "@" + val + "@";
						console.log(this.name)
					}
				}
			}, mounted() {
				this.site = this.name; // 这里调用一次才会调用 site的set方法
			}
		});
		// vm2.site = "999"; // 这里调用一次才会调用 site的set方法
		// document.write(vm2.site);
	</script>	
	
	<h1>4- 绑定Class对象</h1>
	<h2>4.1- 绑定一个classObject</h2>
	<style>
	.active {
		width: 100px;
		height: 100px;
		background: green;
	}
	.text-danger {
		background: red;
	}
	</style>
	<div id="app6">
		<div v-bind:class="classObject"></div>
	</div>
	<script>
		new Vue({
			el:"#app6",
			data:{
				classObject: {
			      active: true,
			      'text-danger': true
			    }
			}
		})
	</script>
	<h2>4.2- 绑定一个class数组</h2>
	<div id="app7">
		<div v-bind:class="[activeClass, errorClass]"></div>
	</div>
	<script>
		new Vue({
			el:"#app7",
			data:{
				activeClass:"active",
				errorClass:"text-danger"
			}
			
		})
	</script>
	
	<h2>4.3- 使用computed返回计算属性</h2>
	<div id="app8">
		<div v-bind:class="objectClass2"></div>
	</div>
	<script>
		new Vue({
			el: '#app8',
			data: {
				isActive: true,
				error: false
			},
			computed: {
			    objectClass2: function () {
			      return {
			        'active': this.isActive,
			        'text-danger': this.error,
			    	}
		    	}
		  	}
		})
	</script>
	
	</body>
</html>



